//这个版本好用
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Row, Col, Card, List, Typography, Table } from 'antd';
import News from './myNews';
const { Title } = Typography;

// 独立组件用于显示指数信息
const IndexCard = ({ index, value, prevValue }) => {
  const getColor = (value, prevValue) => {
    console.log("")
    if (!prevValue) return '#000'; // 如果没有前一次数据，则默认黑色
    return value > prevValue ? '#ff3333' : '#33cc33'; // 根据涨跌决定颜色
  };

  return (
    <Card
      title={
        <Title level={4} style={{ color: getColor(value, prevValue) }}>
          {index + ': ' + (value !== null ? value.toString() : 'Loading...')}
        </Title>
      }
      bordered={false}
      style={{ marginBottom: 16 }}
    >
    </Card>
  );
};

const MyContent = () => {
  const [indices, setIndices] = useState({
    上证指数: null,
    深证成指: null,
    创业板指: null,
    沪深300: null,
    中证500: null,
    上证50: null
  });
  const [prevIndices, setPrevIndices] = useState({});
  const [hotStocks, setHotStocks] = useState([]);

  useEffect(() => {
    const fetchData = () => {
      axios.get('api/stock/index_data')
        .then(response => {
          setPrevIndices(indices);
          setIndices(response.data.data);
        })
        .catch(error => console.error('Error fetching index data:', error));
    };

    fetchData();
    const interval = setInterval(fetchData, 5000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    axios.get('/api/stock/hot_stock')
    //axios.get('/hot_stock.json')
      .then(response => {
        setHotStocks(response.data.data);
      })
      .catch(error => console.error('Error fetching hot stocks:', error));
  }, []);

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price'
    },
    {
      title: '涨跌额',
      dataIndex: 'amount',
      key: 'amount'
    },
    {
      title: '涨跌幅 (%)',
      dataIndex: 'rate',
      key: 'rate',
      render: (text) => {
        const color = text > 0 ? 'red' : 'green';
        const sign = text > 0 ? '+' : '';
        return <span style={{ color: color }}>{sign}{text}%</span>;
      }
    }
  ];

  return (
    <Row gutter={16}>
      <Col span={8}>
        {Object.entries(indices).map(([index, value], idx) => (
          <IndexCard key={idx} index={index} value={value} prevValue={prevIndices[index]} />
        ))}
      </Col>
      <Col span={16}>
        <Row gutter={16}>
          <Col span={24}>
              <News/>
          </Col>
          <Col span={24}>
            <Card title="热门股票" style={{ overflow: 'auto' }}>
              <Table dataSource={hotStocks} columns={columns} pagination={false} scroll={{ y: 400 }} />
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default MyContent;










// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import { Row, Col, Card, List, Typography, Table } from 'antd';

// const { Title } = Typography;

// // 独立组件用于显示指数信息
// const IndexCard = ({ index, value, prevValue }) => {
//   const getColor = (value, prevValue) => {
//     if (!prevValue) return '#000'; // 如果没有前一次数据，则默认黑色
//     return value > prevValue ? '#ff3333' : '#33cc33'; // 根据涨跌决定颜色
//   };

//   return (
//     <Card
//       title={
//         <Title level={4} style={{ color: getColor(value, prevValue) }}>
//           {index + ': ' + (value !== null ? value.toString() : 'Loading...')}
//         </Title>
//       }
//       bordered={false}
//       style={{ marginBottom: 16 }}
//     >
//     </Card>
//   );
// };

// const MyContent = () => {
//   const [indices, setIndices] = useState({
//     上证指数: null,
//     深证成指: null,
//     创业板指: null,
//     沪深300: null,
//     中证500: null,
//     上证50: null
//   });
//   const [prevIndices, setPrevIndices] = useState({});
//   const [hotStocks, setHotStocks] = useState([]);

//   useEffect(() => {
//     const fetchData = () => {
//       axios.get('api/stock/index_data')
//         .then(response => {
//           setPrevIndices(indices);
//           setIndices(response.data.data);
//         })
//         .catch(error => console.error('Error fetching index data:', error));
//     };

//     fetchData();
//     const interval = setInterval(fetchData, 30000);
//     return () => clearInterval(interval);
//   }, []);

//   useEffect(() => {
//     axios.get('/hot_stock.json')
//     //axios.get('/api/stock/hot_stock')
//       .then(response => {
//         setHotStocks(response.data.data);  // Make sure to access response.data.data
//       })
//       .catch(error => console.error('Error fetching hot stocks:', error));
//   }, []);

//   const columns = [
//     {
//       title: '名称',
//       dataIndex: 'name',
//       key: 'name'
//     },
//     {
//       title: '价格',
//       dataIndex: 'price',
//       key: 'price'
//     },
//     {
//       title: '交易额',
//       dataIndex: 'amount',
//       key: 'amount'
//     },
//     {
//       title: '涨跌幅 (%)',
//       dataIndex: 'rate',
//       key: 'rate'
//     }
//   ];

//   return (
//     <Row gutter={16}>
//       <Col span={8}>
//         {Object.entries(indices).map(([index, value], idx) => (
//           <IndexCard key={idx} index={index} value={value} prevValue={prevIndices[index]} />
//         ))}
//       </Col>
//       <Col span={16}>
//         <Row gutter={16}>
//           <Col span={24}>
//             <Card title="新闻栏目" style={{ marginBottom: 16 }}>
//               <List
//                 dataSource={/* Assuming news data */ []}
//                 renderItem={item => <List.Item>{item.title}</List.Item>}
//               />
//             </Card>
//           </Col>
//           <Col span={24}>
//             <Card title="热门股票" style={{ overflow: 'auto' }}>
//               <Table dataSource={hotStocks} columns={columns} pagination={false} scroll={{ y: 360 }} />
//             </Card>
//           </Col>
//         </Row>
//       </Col>
//     </Row>
//   );
// };

// export default MyContent;





















// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import { Row, Col, Card, List, Typography, Table } from 'antd';

// const { Title } = Typography;

// const IndexCard = ({ index, value, prevValue }) => {
//   const getColor = (value, prevValue) => {
//     if (!prevValue) return '#000'; // 如果没有前一次数据，则默认黑色
//     return value > prevValue ? '#ff3333' : '#33cc33'; // 根据涨跌决定颜色
//   };

//   return (
//     <Card
//       title={
//         <Title level={4} style={{ color: getColor(value, prevValue) }}>
//           {index + ': ' + (value !== null ? value.toString() : 'Loading...')}
//         </Title>
//       }
//       bordered={false}
//       style={{ marginBottom: 16 }}
//     >
//     </Card>
//   );
// };

// const MyContent = () => {
//   const [indices, setIndices] = useState({
//     上证指数: null,
//     深证成指: null,
//     创业板指: null,
//     沪深300: null,
//     中证500: null,
//     上证50: null
//   });
//   const [prevIndices, setPrevIndices] = useState({});
//   const [hotStocks, setHotStocks] = useState([]);

//   useEffect(() => {
//     const fetchData = () => {
//       axios.get('api/stock/index_data')
//         .then(response => {
//           setPrevIndices(indices);
//           setIndices(response.data.data);
//         })
//         .catch(error => console.error('Error fetching index data:', error));
//     };

//     fetchData();
//     const interval = setInterval(fetchData, 30000);
//     return () => clearInterval(interval);
//   }, []);

//   useEffect(() => {
//     //axios.get('/api/stock/hot_stock')
//     axios.get('./hot_stock.json')
//       .then(response => {
//         setHotStocks(response.data.data);  // Make sure to access response.data.data
//       })
//       .catch(error => console.error('Error fetching hot stocks:', error));
//   }, []);

//   const columns = [
//     {
//       title: '名称',
//       dataIndex: 'name',
//       key: 'name'
//     },
//     {
//       title: '价格',
//       dataIndex: 'price',
//       key: 'price'
//     },
//     {
//       title: '交易额',
//       dataIndex: 'amount',
//       key: 'amount'
//     },
//     {
//       title: '涨跌幅 (%)',
//       dataIndex: 'rate',
//       key: 'rate'
//     }
//   ];

//   return (
//     <Row gutter={16}>
//       <Col span={8}>
//         {Object.entries(indices).map(([index, value], idx) => (
//           <IndexCard key={idx} index={index} value={value} prevValue={prevIndices[index]} />
//         ))}
//       </Col>
//       <Col span={16}>
//         <Row gutter={16}>
//           <Col span={24}>
//             <Card title="新闻栏目" style={{ marginBottom: 16 }}>
//               <List
//                 dataSource={/* Assuming news data */ []}
//                 renderItem={item => <List.Item>{item.title}</List.Item>}
//               />
//             </Card>
//           </Col>
//           <Col span={24}>
//             <Card title="热门股票">
//               <Table dataSource={hotStocks} columns={columns} pagination={false} />
//             </Card>
//           </Col>
//         </Row>
//       </Col>
//     </Row>
//   );
// };

// export default MyContent;






















//目前最好用的版本
// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import { Row, Col, Card, List, Typography } from 'antd';

// const { Title } = Typography;

// // 独立组件用于显示指数信息
// const IndexCard = ({ index, value, prevValue }) => {
//   const getColor = (value, prevValue) => {
//     if (!prevValue) return '#000'; // 如果没有前一次数据，则默认黑色
//     return value > prevValue ? '#ff3333' : '#33cc33'; // 根据涨跌决定颜色
//   };

//   return (
//     <Card
//       title={
//         <Title level={4} style={{ color: getColor(value, prevValue) }}>
//           {index + ': ' + (value !== null ? value.toString() : 'Loading...')}
//         </Title>
//       }
//       bordered={false}
//       style={{ marginBottom: 16 }}
//     >
//     </Card>
//   );
// };

// const MyContent = () => {
//   const [indices, setIndices] = useState({
//     上证指数: null,
//     深证成指: null,
//     创业板指: null,
//     沪深300: null,
//     中证500: null,
//     上证50: null
//   });
//   const [prevIndices, setPrevIndices] = useState({});
//   const [hotStocks, setHotStocks] = useState([]);

//   useEffect(() => {
//     const fetchData = () => {
//       axios.get('api/stock/index_data')
//         .then(response => {
//           setPrevIndices(indices);
//           setIndices(response.data.data);
//         })
//         .catch(error => console.error('Error fetching index data:', error));
//     };

//     fetchData();  // Initial fetch
//     const interval = setInterval(fetchData, 30000);  // Set to every 30 seconds
//     return () => clearInterval(interval);  // Clean up on unmount
//   }, []);  // Empty dependency array to run only once on mount

//   useEffect(() => {
//     axios.get('/api/stock/hot_stock')
//       .then(response => {
//         setHotStocks(response.data.stocks);
//       })
//       .catch(error => console.error('Error fetching hot stocks:', error));
//   }, []);

//   return (
//     <Row gutter={16}>
//       <Col span={8}>
//         {Object.entries(indices).map(([index, value], idx) => (
//           <IndexCard key={idx} index={index} value={value} prevValue={prevIndices[index]} />
//         ))}
//       </Col>
//       <Col span={16}>
//         <Row gutter={16}>
//           <Col span={24}>
//             <Card title="新闻栏目" style={{ marginBottom: 16 }}>
//               <List
//                 dataSource={/* Assuming news data */ []}
//                 renderItem={item => <List.Item>{item.title}</List.Item>}
//               />
//             </Card>
//           </Col>
//           <Col span={24}>
//             <Card title="热门股票">
//               <List
//                 dataSource={hotStocks}
//                 renderItem={item => (
//                   <List.Item>
//                     {item.name} {item.price}
//                   </List.Item>
//                 )}
//               />
//             </Card>
//           </Col>
//         </Row>
//       </Col>
//     </Row>
//   );
// };

// export default MyContent;
















